<template>
	<view class="flex flex-col h-screen">
		<NavBarVue title="解读详情"></NavBarVue>
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y="true" class="h-full">
				<view class="px-20 pb-20" v-if="!loading">
					<view class="box-problem p-20 mb-20">
						<view class="bg_part mb-20">
							<view class="flex items-center p-10">
								<text class="text-sm font-bold">问题为：</text>
							</view>
							<view class="desc bg-[#EBF7FF] p-20">{{postDetail?.describe}}</view>
						</view>
					</view>
					<view class="box-problem p-20 mb-20">
						<view class="bg_part mb-20">
							<view class="flex items-center p-10">
								<text class="text-sm font-bold">不适感为：</text>
							</view>
							<view class="bg_content">
								<view class="flex flex-wrap">
									<view class="flex justify-center items-center w-[33%] mb-20" v-for="(item, idx) in addparmeList"
										:key="idx">
										<view class="text-checkbox mr-10">{{item.value}}</view>
										<ImageBoxVue v-if="addparme.indexOf(item.value) != -1" src="/static/icons/selected.png"
											width="36rpx" height="36rpx"></ImageBoxVue>
										<ImageBoxVue v-else src="/static/icons/no_selected.png" width="36rpx" height="36rpx">
										</ImageBoxVue>
									</view>
								</view>
							</view>
						</view>
						<view class="bg_part mb-10" style="background-size: cover;" v-if="postDetail?.replenishment">
							<view class="flex items-center p-10">
								<text class="text-sm font-bold">补充说明：</text>
								<view class="desc">{{postDetail?.replenishment}}</view>
							</view>
						</view>
					</view>
					<view class="box-supplement mb-40" v-if="supplementList.length">
						<view class="title flex justify-center items-center">
							<text>补充信息</text>
						</view>
						<view class="contents flex flex-wrap">
							<view class="year mr-20 mb-10">公元 {{supplementList[0]}} 年出生</view>
							<view class="zodiac mr-20 mb-10">{{supplementList[1]}}</view>
							<view class="gender mr-20 mb-10">{{supplementList[2]}}</view>
							<view class="gender mr-20 mb-10">{{supplementList[3]}}</view>
							<view class="zodiac mr-20">{{supplementList[4]}}</view>
							<view class="year">{{supplementList[5]}}</view>
						</view>
					</view>
					<view class="box-supplement mb-40" v-else>
						<view class="title no flex justify-center items-center">
							<text>无补充信息</text>
						</view>
					</view>
					<view class="flex mb-20">
						<view class="box-pay py-10 px-20 ml-10 rounded-full flex items-center">
							<text class="mr-10 text-pay">已支付</text>
							<view class="flex items-center px-20 py-10 rounded-full bg-white">
								<ImageBoxVue :src="postDetail?.paysts==0?'/static/icons/blue.png':'/static/icons/red.png'" width="28rpx"
									height="28rpx">
								</ImageBoxVue>
								<text class="ml-10">{{postDetail?.sinpay}}钻</text>
							</view>
						</view>
					</view>
					<view class="" v-for="(item, idx) in aanlist" :key="idx">
						<view class="flex items-start mt-20" v-if="item.details">
							<view class="w-80 h-80 rounded-full overflow-hidden">
								<ImageBoxVue :src="item.anchor.headimg"></ImageBoxVue>
							</view>
							<view class="box-msg w-[60%] p-20 bg-white rounded-lg ml-30">{{item.details}}</view>
						</view>
						<template v-if="item.voiceArr.length">
							<view class="flex items-start mt-20" v-for="(sound, index) in item.voiceArr" :key="index">
								<view class="w-80 h-80 rounded-full overflow-hidden">
									<ImageBoxVue :src="item.anchor.headimg"></ImageBoxVue>
								</view>
								<view class="flex items-center">
									<view class="box-msg w-228 p-20 bg-white rounded-lg ml-30">
										<view @click="playAudio(sound)"
											class="flex items-center justify-start bg-gradient-to-b from-[#94F2FF] to-[#34D3DD] rounded-full h-44 pl-10">
											<view class="icon-voice" v-if="sound.playing"></view>
											<ImageBoxVue src="/static/user/icon_voice3.png" width="28rpx" height="28rpx" v-else></ImageBoxVue>
											<text class="text-white ml-4">{{sound.time}}''</text>
										</view>
									</view>
								</view>
							</view>
						</template>
					</view>
					<view class="box-tips flex justify-center items-center mb-20">
						<ImageBoxVue src="/static/icons/icon_left.png" width="28rpx" height="20rpx"></ImageBoxVue>
						<text>如果你需要更详细的解读或连线畅聊</text>
						<ImageBoxVue src="/static/icons/icon_right.png" width="28rpx" height="20rpx"></ImageBoxVue>
					</view>
					<view class="box-list">
						<view class="box-item p-20 mb-20" v-for="(item, idx) in 4" :key="idx">
							<view class="flex mb-20">
								<view class="left">
									<view class="flex flex-col items-center relative">
										<view class="w-120 h-120 rounded-full overflow-hidden border-2 border-solid border-[#BADEFF]">
											<ImageBoxVue :src="val.headimg"></ImageBoxVue>
										</view>
										<view v-if="val.vioArr?.length > 0" @click="playAudioSelf(val.vioArr)"
											class="absolute -bottom-20 flex items-center justify-center bg-gradient-to-b from-[#94F2FF] to-[#34D3DD] rounded-full w-88 h-44">
											<view class="icon-voice" v-if="playing"></view>
											<ImageBoxVue src="/static/user/icon_voice3.png" width="28rpx" height="28rpx" v-else></ImageBoxVue>
											<text class="text-white ml-4">{{val.vioArr[1]}}''</text>
										</view>
									</view>
								</view>
								<view class="right flex-1 ml-20">
									<view class="flex items-center">
										<view class="name">小张</view>
										<view class="vertical-line"></view>
										<view class="job">卡牌师</view>
										<view class="mx-10">
											<view class="flex justify-center items-center" v-if="val.gender==0">
												<view class="rounded-full w-48 h-36 bg-[#FD6CFF] flex items-center justify-center">
													<ImageBoxVue src="/static/icons/w_man.png" width="24rpx" height="24rpx">
													</ImageBoxVue>
												</view>
											</view>
											<view class="flex justify-center items-center" v-if="val.gender==1">
												<view class="rounded-full w-48 h-36 bg-[#329EFF] flex items-center justify-center">
													<ImageBoxVue src="/static/icons/man.png" width="24rpx" height="24rpx"></ImageBoxVue>
												</view>
											</view>
										</view>
										<view class="bg-[#65A3FF] px-12 h-36 flex items-center rounded-full">
											<text class="text-white">{{val.starsign}}</text>
										</view>
									</view>
									<view class="desc multiline-ellipsis">{{val.sig}}</view>
								</view>
							</view>
							<view class="flex">
								<view class="btn-details flex-1 flex justify-center items-center mr-20">
									<text>主播详情</text>
								</view>
								<view class="btn-msgs flex-1 flex justify-center items-center mr-20">
									<text>发送信息</text>
								</view>
								<view class="btn-red flex-1 flex justify-center items-center mr-20">
									<text>红钻连麦</text>
								</view>
								<view class="btn-blue flex-1 flex justify-center items-center">
									<text>蓝钻连麦</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onShow,
	} from "@dcloudio/uni-app"
	import {
		jobQuery
	} from '@/config/publicFun';
	import communityApi from '@/apis/apiList/communityApi';
	import postCompVue from '@/components/postComp.vue';
	import config from '../../config/index.js'
	import spread1 from './spread/spread1.vue';
	import spread2 from './spread/spread2.vue';
	import spread3 from './spread/spread3.vue';
	import spread4 from './spread/spread4.vue';
	import spread5 from './spread/spread5.vue';
	import spread6 from './spread/spread6.vue';
	import spread7 from './spread/spread7.vue';
	import spread8 from './spread/spread8.vue';
	import spread9 from './spread/spread9.vue';
	import spread10 from './spread/spread10.vue';
	import spread11 from './spread/spread11.vue';
	import spread12 from './spread/spread12.vue';
	import spread13 from './spread/spread13.vue';
	import spread14 from './spread/spread14.vue';
	import spread15 from './spread/spread15.vue';
	import spread16 from './spread/spread16.vue';

	const postId = ref("") // 帖子ID
	const postDetail = ref({}) // 帖子详情
	const loading = ref(false) // 加载中
	const showKeyWord = ref(false) // 是否显示关键词
	const isAch = ref(0)
	const cardList = ref([])
	const addparmeList = ref([])
	const addparme = computed(() => { // 不适感
		return postDetail.value.addparme ? postDetail.value.addparme.split(',') : []
	})

	const val = ref({})

	const supplementList = ref([]) // 补充说明
	const aanlist = ref([]) // 解读信息
	const playing = ref(false)
	const audioCtx = ref(null)
	onMounted(() => {
		addparmeList.value = uni.getStorageSync("addparme")
		addparmeList.value.map(item => {
			item.disable = true
		})
	})

	onLoad((option) => {
		postId.value = option.id;
		loading.value = true
		isAch.value = uni.getStorageSync('user').ach
		val.value = uni.getStorageSync('user')
	})

	onShow((option) => {
		getDetail()
	})

	const getDetail = () => {
		const opt = {
			id: postId.value,
			'member.id': uni.getStorageSync('user').id
		}
		loading.value = true
		communityApi.getPossInfobyPossid(opt).then(res => {
			if (res.data.aanlist) {
				res.data.aanlist.map(post => {
					if (post.sts == 1) {
						let arr = post.headimg ? post.headimg.split(',') : [];
						let vArr = []
						arr.map(item => {
							let a1 = item.split('|')
							let obj = {
								url: a1[0],
								time: a1[1],
								playing: false,
							}
							vArr.push(obj)
						})
						post.voiceArr = vArr
					}
				})
			}
			supplementList.value = res.data.problem ? res.data.problem.split(',') : []
			aanlist.value = res.data.aanlist || []
			postDetail.value = res.data
			loading.value = false
			if (postDetail.value.sdes == 1) {
				getCardList()
			}
		})
	}

	const getCardList = () => {
		const opt = {
			"poss.id": postId.value
		}
		communityApi.getPossTarotlistatPid(opt).then(res => {
			// console.log(res)
			cardList.value = res.data
		})
	}
	const playAudioSelf = (val) => {
		if (!val.length) {
			return
		}
		if (playing.value) {
			audioCtx.value.stop();
			playing.value = false
			audioCtx.value = null
		} else {
			playing.value = true
			audioCtx.value = uni.createInnerAudioContext();
			audioCtx.value.src = val[0]; // 在线音频地址
			audioCtx.value.play();
			audioCtx.value.onEnded(() => {
				playing.value = false
			})
		}
	}
	const playAudio = (val, idx) => {
		if (val.playing) {
			audioCtx.value.stop();
			val.playing = false
			audioCtx.value = null
		} else {
			val.playing = true
			audioCtx.value = uni.createInnerAudioContext();
			audioCtx.value.src = val.url; // 在线音频地址
			console.log(audioCtx.value.src);
			audioCtx.value.play();
			audioCtx.value.onEnded((res) => {
				val.playing = false
			})
		}
	}
	// 跳转星盘
	const onAstrolabe = () => {
		const idsArr = postDetail.value.selcard.split(',')
		uni.navigateTo({
			url: `/pages/test/astrolabe?tab=${idsArr.length>1?0:4}&ids=${postDetail.value.selcard}`
		})
	}
	const handleKeyWord = () => {
		showKeyWord.value = !showKeyWord.value
	}
	const handleGoUser = (router, id, ach) => {
		if (ach == 1) {
			const anchorId = uni.getStorageSync("anchor").id
			if (anchorId != id) {
				onPath(router)
			}
		} else {
			const userId = uni.getStorageSync("user").id
			if (userId != id) {
				onPath(router)
			}
		}
	}
	const onPath = (router) => {
		uni.navigateTo({
			url: router
		})
	}
</script>

<style lang="scss" scoped>
	.box-problem {
		background: linear-gradient(180deg, #D3EFFF 0%, #DDF2FF 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		// border: 2rpx solid;
		// border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 2 2;

		.bg_part {
			background: url(/static/test/bg_part.png) left top no-repeat;
			background-size: contain;
		}

		.bg_content {
			background: rgba(255, 255, 255, 0.4);
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			padding: 32rpx;

			.text-checkbox {
				font-weight: 400;
				font-size: 26rpx;
				color: #273A3F;
				line-height: 36rpx;
			}
		}

		.desc {
			color: #273A3F;
		}
	}

	.box-supplement {
		background: linear-gradient(180deg, #E9F6FF 0%, #FFFFFF 100%);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		overflow: hidden;

		.title {
			position: relative;
			height: 80rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #1B2043;
			line-height: 56rpx;
			background: url(/static/test/bg_title.png) no-repeat;
			background-size: cover;

			&.no {
				background: url(/static/test/bg_no_supplement.png) no-repeat;
				background-size: cover;
			}

			.box-choose {
				position: absolute;
				top: 26rpx;
				right: 40rpx;
			}
		}

		.contents {
			// opacity: 0.26;
			font-weight: 500;
			font-size: 28rpx;
			color: #324869;
			line-height: 56rpx;
			padding: 36rpx 40rpx;

			.year {
				background: linear-gradient(90deg, rgba(204, 204, 255, 0.26) 0%, rgba(117, 185, 255, 0.4) 100%);
				border-radius: 14rpx 14rpx 14rpx 14rpx;
				color: #324869;
				padding: 14rpx 22rpx;
			}

			.zodiac {
				background: linear-gradient(90deg, rgba(159, 166, 255, 0.26) 0%, rgba(181, 117, 255, 0.4) 100%);
				border-radius: 14rpx 14rpx 14rpx 14rpx;
				color: #362758;
				padding: 14rpx 22rpx;
			}

			.gender {
				background: linear-gradient(90deg, rgba(255, 190, 190, 0.26) 0%, rgba(255, 117, 181, 0.4) 100%);
				border-radius: 14rpx 14rpx 14rpx 14rpx;
				color: #572242;
				padding: 14rpx 22rpx;
			}
		}

		.box-desc {
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 56rpx;
			padding: 28rpx 40rpx;
		}
	}

	.box-tips {
		height: 82rpx;
		background: linear-gradient(180deg, rgba(255, 178, 207, 0) 0%, #FFB9D4 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		text {
			font-weight: bold;
			font-size: 30rpx;
			color: #FF00C8;
			margin: 0 24rpx;
		}
	}

	.box-pay {
		background: #BBE4FF;
		box-shadow: inset 0rpx 0rpx 8rpx 0rpx rgba(32, 121, 202, 0.4);
		border-radius: 120rpx 120rpx 120rpx 120rpx;

		.text-pay {
			font-weight: 400;
			font-size: 32rpx;
			color: #3A5970;
			line-height: 32rpx;
		}

		.pay-num {
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 28rpx;
		}
	}

	.box-list {
		.box-item {
			background: linear-gradient(180deg, #FFF8F8 0%, #FFFCFD 100%);
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.right {
				.name {
					font-weight: bold;
					font-size: 32rpx;
					color: #000000;
					line-height: 46rpx;
				}

				.vertical-line {
					width: 2rpx;
					height: 20rpx;
					background: #CCCCCC;
					margin: 0 12rpx;
				}

				.job {
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					line-height: 34rpx;
				}

				.desc {
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					line-height: 36rpx;
					margin-top: 10rpx;
				}
			}

			.btn-details {
				background: url(/static/test/btn_details.png) no-repeat;
				background-size: cover;
				width: 148rpx;
				height: 60rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 34rpx;
			}

			.btn-msgs {
				background: url(/static/test/btn_msgs.png) no-repeat;
				background-size: cover;
				width: 148rpx;
				height: 60rpx;
				ont-weight: 400;
				font-size: 24rpx;
				color: #FB1828;
				line-height: 34rpx;
			}

			.btn-red {
				background: url(/static/test/btn_red.png) no-repeat;
				background-size: cover;
				width: 148rpx;
				height: 60rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 34rpx;
			}

			.btn-blue {
				background: url(/static/test/btn_blue.png) no-repeat;
				background-size: cover;
				width: 148rpx;
				height: 60rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 34rpx;
			}
		}
	}

	.box-card {
		width: 180rpx;
		height: 315.27rpx;
	}

	.line {
		border-bottom: 2rpx dashed #ccc;
	}

	.icon-voice {
		animation-name: voiceExample;
		/* 引用上面定义的@keyframes */
		animation-duration: 3s;
		/* 动画持续时间 */
		animation-iteration-count: infinite;
		/* 无限循环 */
		background: url(/static/user/icon_voice1.png) no-repeat;
		background-size: contain;
		width: 28rpx;
		height: 30rpx;
	}

	@keyframes voiceExample {
		0% {
			background: url(/static/user/icon_voice1.png) no-repeat;
			background-size: contain;
			width: 28rpx;
			height: 30rpx;
		}

		50% {
			background: url(/static/user/icon_voice2.png) no-repeat;
			background-size: contain;
			width: 28rpx;
			height: 30rpx;
		}

		100% {
			background: url(/static/user/icon_voice3.png) no-repeat;
			background-size: cover;
			width: 28rpx;
			height: 30rpx;
		}
	}
</style>